<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="container">
      <el-form :inline="true" v-model="query" class="demo-form-inline" size="mini">
        <el-form-item label="标题：" prop="pro_title">
          <el-input v-model="query.pro_title"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" icon="el-icon-search" @click="toQuery">搜索</el-button>
          <el-button size="mini" icon="el-icon-refresh" @click="reset">重置</el-button>
          <!-- 导出（查询） -->
          <el-button
            :loading="downloadLoading"
            plain
            size="mini"
            icon="el-icon-download"
            @click="download('0')">导出（查询）
          </el-button>
          <!-- 导出（勾选） -->
          <el-button
            :loading="downloadLoading"
            :disabled="$refs.table && $refs.table.selection.length === 0"
            plain
            size="mini"
            icon="el-icon-download"
            @click="download('1')"> 导出（勾选）
          </el-button>
        </el-form-item>
      </el-form>
      <div class="operate-container">
        <el-button type="primary" size="mini" @click="create()">添加</el-button>
      </div>
      <el-table
        v-loading="loading"
        :data="data"
        size="small"
        style="width: 100%">
        <el-table-column type="selection"/>
        <el-table-column v-if="show" label="商品id" prop="commodity_id" align="center"/>
        <el-table-column
          prop="evaluate_id"
          label="ID"
          align="center"/>
        <el-table-column
          prop="nick"
          label="评论人"
          align="center"/>
        <el-table-column
          prop="icon_url"
          label="图片"
          align="center">
          <template slot-scope="scope">
            <img
              :src="scope.row.icon_url"
              alt="点击打开"
              class="el-avatar"
              @click="viewImg(scope.row.icon_url ? scope.row.icon_url[0].url : '')">
          </template>
        </el-table-column>
        <el-table-column
          prop="level"
          label="等级"
          align="center"/>
        <el-table-column
          prop="create_date"
          label="创建时间"
          align="center"/>
        <el-table-column
          prop="state"
          label="状态"
          align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.state === 0">已上架</div>
            <div v-if="scope.row.state === 1">仓库中</div>
            <div v-if="scope.row.state === 2">自定义时间上架</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="pro_title"
          label="标题"
          align="center"/>
        <el-table-column
          prop="activity_details"
          label="评论"
          align="center"/>
        <el-table-column
          label="操作"
          align="center"
          width="130px">
          <template slot-scope="scope">
            <el-button size="mini" title="编辑" type="primary" icon="el-icon-edit" @click="edit(scope.row)"/>
            <el-popover
              :ref="scope.row.evaluate_id"
              placement="top"
              width="180">
              <p>确定删除本条数据吗？</p >
              <div style="text-align: right; margin: 0">
                <el-button size="mini" type="text" @click="$refs[scope.row.evaluate_id].doClose()">取消</el-button>
                <el-button :loading="delLoading" type="primary" size="mini" @click="del(scope.row.evaluate_id)">确定</el-button>
              </div>
              <el-button slot="reference" type="danger" title="删除" size="mini" icon="el-icon-delete" />
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
      <div>
        <!--分页组件-->
        <el-pagination
          :total="total"
          :current-page="page + 1"
          style="margin-top: 8px;"
          background
          layout="total, prev, pager, next, sizes"
          @size-change="sizeChange"
          @current-change="pageChange"/>
      </div>
      <e-form ref="form"/>
    </div>
  </div>
</template>
<script>
import initData from '@/mixins/initData'
import { del } from '@/api/evluate4'
import eForm from './form'

export default {
  components: { eForm },
  mixins: [initData],
  data() {
    return {
      query: {},
      delLoading: false
    }
  },
  created() {
    this.$nextTick(() => {
      this.init()
    })
  },
  methods: {
    beforeInit() {
      this.url = '/api/evluate4'
      const sort = 'create_date,desc'
      this.params = { page: this.page, size: this.size, sort: sort }
      const query = this.query
      const evaluate_id = query.evaluate_id
      if (evaluate_id && evaluate_id !== '') { this.params['evaluate_id'] = evaluate_id }
      const nick = query.nick
      if (nick && nick !== '') { this.params['nick'] = nick }
      const icon_url = query.icon_url
      if (icon_url && icon_url !== '') { this.params['icon_url'] = icon_url }
      const level = query.level
      if (level && level !== '') { this.params['level'] = level }
      const create_date = query.create_date
      if (create_date && create_date !== '') { this.params['create_date'] = create_date }
      const state = query.state
      if (state && state !== '') { this.params['state'] = state }
      const pro_title = query.pro_title
      if (pro_title && pro_title !== '') { this.params['pro_title'] = pro_title }
      const delete_flag = query.delete_flag
      if (delete_flag && delete_flag !== '') { this.params['delete_flag'] = delete_flag }
      const activity_details = query.activity_details
      if (activity_details && activity_details !== '') { this.params['activity_details'] = activity_details }
      return true
    },
    download(type) {
      // 从新获取查询条件
      this.querySetObject()
      this.downloadLoading = true
      let data = {}
      if (type === '0') {
        // 导出查询
        data = this.params
      } else {
        // 导出勾选
        const dataSelect = this.$refs.table.selection
        const commodity_ids = []
        for (let i = 0; i < dataSelect.length; i++) {
          commodity_ids.push(dataSelect[i].commodity_id)
        }
        data = { 'commodity_ids': commodity_ids }
      }
      // eslint-disable-next-line no-undef
      downloadCommoditys(data).then(result => {
        // eslint-disable-next-line no-undef
        downloadFile(result, '商品列表', 'xlsx')
        this.downloadLoading = false
      }).catch((err) => {
        console.log(err.response.data.message)
        this.downloadLoading = false
      })
    },
    create() {
      const _this = this.$refs.form
      _this.dialog = true
    },
    edit(info) {
      const _this = this.$refs.form
      _this.dialog = true
      // 使修改内容在保存之前不触动主页面修改
      _this.form = Object.assign({}, (info))
    },
    reset() {
      this.$refs['query'].resetFields()
      // 重新请求数据
      this.init()
    },
    del(evaluate_id) {
      this.delLoading = true
      del(evaluate_id).then(res => {
        this.delLoading = false
        this.$refs[evaluate_id].doClose()
        this.dleChangePage()
        this.init()
        this.$message({
          message: '删除成功！',
          type: 'success'
        })
      }).catch(err => {
        this.delLoading = false
        this.$refs[evaluate_id].doClose()
        console.log(err.response.data.message)
      })
    },
    toQuery() {
      this.init()
    }
  }
}
</script>
<style>
  .el-form .el-input{
    width: 180px;
  }
</style>
